<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*p:nth-of-type(1){
			text-shadow: 0 0 5px red;
		}
		@font-face{
			font-family: font1;
			src:url(fonts/BrushScriptStd.ttf);
		}
		p:nth-of-type(3){
			font-family: font1;
			font-size: 20px;
		}*/
        /*div {
            width: 200px;
            height: 200px;
            border: 18px solid;
            border-image: url(borderimage.png) 18 18 18 18 fill;
        }*/
        
        div{ width: 100px; height: 100px;}
        /*div:nth-of-type(2) {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            transform: translate(100px, 100px) rotate(10deg);
        }*/
        figure{
        	width: 590px;
        	height: 350px;
        	position: relative;
        	overflow: hidden;
        }
        figure figcaption{
        	position: absolute;
        	bottom: 10px;
        	left: 10px;
        	color: #fff;
        }
        figure img{
        	transition:all .5s;
        }
        figure:hover img{
        	transform: translate(-10px);
        }
    </style>
</head>

<body>
    <!-- <p>撒电话交换机</p>
	<p>法撒旦发射点杀杀杀</p>
	<p>asdfsdafajsdhfjkasdhfljkasdff</p> -->
    <!--<div>的还是发几克拉科夫哈就立刻受到收到回复</div>-->
    <!-- <div>缩放</div>
    <div>旋转</div> -->
    <figure>
    	<img src="pic1.jpg" alt="">
    	<figcaption>
    		<h2>图片标题</h2>
    		<p>图片描述阿斯顿撒旦发送大附件</p>
    	</figcaption>
    </figure>
</body>
</html>